<template>
  <div>
    <!-- title -->
    <h2>角色管理</h2>

    <Divider />

    <Form ref="form" :model="form" inline>
      <FormItem>
        <Input type="text" v-model="form.role"
               style="width: 200px;" placeholder="角色"/>
      </FormItem>
      <FormItem class="button-container">
        <Button type="primary" icon="ios-search"
                @click="search">查询</Button>
        <Button icon="ios-trash"
                @click="reset">清空</Button>
      </FormItem>
    </Form>

    <Divider />

    <div class="button-container margin-bottom-8">
      <Button v-if="hasPermissionEdit"
              type="primary" icon="md-add"
              @click="openCreateModal">添加</Button>
    </div>

    <Table stripe
           :columns="table.columns"
           :data="table.data"
           :loading="table.loading">
      <template slot="action" slot-scope="{ row }">
        <div class="button-container">
          <Button v-if="hasPermissionEdit"
                  type="primary" size="small"
                  @click="openUpdateModal(row.id)">编辑</Button>
          <Button v-if="hasPermissionDelete"
                  type="error" size="small"
                  @click="delRole(row.id)">删除</Button>
        </div>
      </template>
    </Table>

    <div class="page-container">
      <Page :current="page.current" :total="page.total"
            :page-size="page.size"
            show-elevator show-sizer show-total
            @on-change="handleChangePage"
            @on-page-size-change="handleChangePageSize"/>
    </div>

    <Create ref="createModal" @success="search"></Create>
    <Update ref="updateModal" @success="initData"></Update>
  </div>
</template>

<script>
import { roles, deleteRole } from '../../../apis/system/role';

import Create from './components/create.vue';
import Update from './components/update.vue';

export default {
  name: 'role',
  components: {
    Create,
    Update
  },
  data() {
    const columns = [
      {
        title: '角色',
        key: 'role'
      },
      {
        title: '描述',
        key: 'description'
      }
    ];

    if (this.$permission.hasPermissions(['system:role:edit', 'system:role:delete'])) {
      columns.push({
        title: '操作',
        slot: 'action',
        width: 180
      });
    }

    return {
      form: {
        role: ''
      },
      table: {
        columns,
        data: [],
        loading: false,
      },
      page: {
        total: 0,
        current: 1,
        size: 10,
      }
    };
  },
  created() {
    this.init();
  },
  methods: {
    init() {
      this.initData();
    },
    initData() {
      this.table.loading = true;

      roles({
        role: this.form.role,
        page: true,
        current: this.page.current,
        size: this.page.size
      }, (responseData) => {
        this.table.loading = false;

        this.table.data = responseData.records;
        this.page.total = Number(responseData.total);
      }, () => {
        this.table.loading = false;
      });
    },
    search() {
      this.page.current = 1;
      this.initData();
    },
    reset() {
      this.form = {
        role: ''
      };
      this.page.current = 1;
      this.initData();
    },
    handleChangePage(current) {
      this.page.current = current;
      this.initData();
    },
    handleChangePageSize(size) {
      this.page.size = size;
      this.page.current = 1;
      this.initData();
    },
    openCreateModal() {
      this.$refs.createModal.openModal();
    },
    openUpdateModal(id) {
      this.$refs.updateModal.openModal(id);
    },
    delRole(id) {
      this.$Modal.confirm({
        title: '提示',
        content: '此操作将永久删除该数据，是否继续？',
        loading: true,
        onOk: () => {
          deleteRole(id, () => {
            this.$Modal.remove();
            this.$Message.success('删除成功');
            this.initData();
          });
        }
      });
    }
  },
  computed: {
    hasPermissionEdit() {
      return this.$permission.hasPermissions(['system:role:edit']);
    },
    hasPermissionDelete() {
      return this.$permission.hasPermissions(['system:role:delete']);
    },
  },
};
</script>

<style scoped>

</style>
